import { Button, DatePicker, Form, Input, InputNumber, Select, TreeSelect, Divider, Cascader, Radio, Checkbox, Space } from 'antd';
import dayjs from 'dayjs';
import area from '@/components/staticFile/region_options.json';
import product from '@/components/staticFile/product_options.json';
import product_options_new from '@/components/staticFile/product_options_new.json';

import TextArea from 'antd/es/input/TextArea';
import chinaEconomy from '@/components/staticFile/industry_classification_options.json';
import { useModel } from '@umijs/max';
import { useForm } from 'antd/es/form/Form';
import { useEffect } from 'react';

// 提取重复样式和常量，减少冗余
const COMMON_FIELD_STYLE = { width: '100%', height: 40, borderRadius: 4 };
const LAST_YEAR = dayjs().subtract(1, 'year').format('YYYY');
const FORM_LAYOUT = {
  labelCol: { span: 5 }, // 调整标签宽度，避免长标签换行
  wrapperCol: { span: 19 },
  layout: 'horizontal' as const,
  
  size: 'middle' as const, // 统一表单控件尺寸
};
function addSelectableToNonLeafNodes(data: any[]) {
  data.forEach((node: { children: string | any[]; selectable: boolean }) => {
    if (node.children && node.children.length > 0) {
      node.selectable = false;
      addSelectableToNonLeafNodes(node.children as any[]);
    }
  });
  return data;
}
const StepOnePage: React.FC = () => {
  const { stepProps, setStepProps } = useModel('DigitalizationManager.stepProps');
  const { initialState, setInitialState } = useModel('@@initialState');
  const [form] = Form.useForm();

  useEffect(() => {
    const newData = Object.assign({}, (initialState?.currentUser as any).data)
    newData.companyChangeTime = dayjs(newData.companyChangeTime)
    form.setFieldsValue(newData)
  }, [(initialState?.currentUser as any).data])

  return (
    <div
      style={{
        display: 'flex',
        flexDirection: 'column',
        height: '100%',
        padding: '20px', // 外层增加内边距，避免贴边
        boxSizing: 'border-box',
        backgroundColor: '#f8f9fa', // 浅色背景提升可读性
      }}
    >
      {/* 可滚动容器优化 */}
      <div
        style={{
          flex: 1,
          overflowY: 'auto',
          padding: '20px',
          backgroundColor: '#fff', // 白色表单背景，区分外层
          borderRadius: 8,
          boxShadow: '0 1px 3px rgba(0,0,0,0.05)', // 轻微阴影增强层次
        }}
      >
        <Form disabled form={form} {...FORM_LAYOUT}>
          {/* 1. 企业基础信息组 */}
          <div style={{ marginBottom: 24 }}>
            {/* <Divider style={{  marginBottom: 20 }} /> */}

            <div
              style={{
                fontSize: 16,
                fontWeight: 500,
                color: '#1f2937',
                marginBottom: 12,
              }}
            >
              企业基础信息
            </div>

            <Form.Item
              label="企业名称"
              name="companyName"
              rules={[{ required: true, message: '请输入企业名称' }]}
              style={{ marginBottom: 20 }} // 统一表单项间距
            >
              <Input disabled placeholder="请输入企业名称" allowClear style={COMMON_FIELD_STYLE} />
            </Form.Item>
            <Form.Item
              label="登录密码"
              name="loginPass"
              rules={[{ required: true, message: '请输入登录密码' }]}
              style={{ marginBottom: 20 }} // 统一表单项间距
            >
              <Input disabled placeholder="请输入登录密码" allowClear style={COMMON_FIELD_STYLE} />
            </Form.Item>

            <Form.Item
              label="信用代码"
              name="reditCode"
              rules={[{ required: true, message: '请输入信用代码' }]}
              style={{ marginBottom: 20 }}
            >
              <Input disabled placeholder="请输入信用代码" allowClear style={COMMON_FIELD_STYLE} />
            </Form.Item>

            <Form.Item
              label="注册城市"
              name="loginInCity"
              rules={[{ required: true, message: '请选择注册城市' }]}
              style={{ marginBottom: 20 }}
              initialValue={"331100"}
            >
              <TreeSelect
                allowClear
                placeholder="请选择注册城市"
                disabled
                treeData={addSelectableToNonLeafNodes(area) as any}
                style={COMMON_FIELD_STYLE}
              />
            </Form.Item>
            <Form.Item
              label="县(市、区)"
              name="loginInArea"
              rules={[{ required: true, message: '请选择注册县(市、区)' }]}
              style={{ marginBottom: 20 }}
            >
              <Select
                allowClear
                placeholder="请选择注册县(市、区)"
                options={[
                  { label: '莲都区', value: '莲都区' },
                  { label: '龙泉市', value: '龙泉市' },
                  { label: '青田县', value: '青田县' },
                  { label: '缙云县', value: '缙云县' },
                  { label: '遂昌县', value: '遂昌县' },
                  { label: '松阳县', value: '松阳县' },
                  { label: '云和县', value: '云和县' },
                  { label: '庆元县', value: '庆元县' },
                  { label: '景宁畲族自治县', value: '景宁畲族自治县' },
                  { label: '经济技术开发区', value: '经济技术开发区' }
                ]}
                style={COMMON_FIELD_STYLE}
              />
            </Form.Item>
            <Form.Item
              label="联系人"
              name="concatPerson"
              rules={[{ required: true, message: '请输入联系人' }]}
              style={{ marginBottom: 20 }}
            >
              <Input disabled allowClear placeholder="请输入联系人" style={COMMON_FIELD_STYLE} />
            </Form.Item>

            <Form.Item
              label="联系电话"
              name="concatPhone"
              rules={[
                { required: true, message: '请输入手机号' },
                {
                  validator(_, value) {
                    if (!value) return Promise.resolve();
                    const v = String(value).trim().replace(/\s+/g, '');
                    return /^1[3-9]\d{9}$/.test(v)
                      ? Promise.resolve()
                      : Promise.reject(new Error('请输入有效的中国手机号'));
                  },
                },
              ]}
              style={{ marginBottom: 20 }}
            >
              <Input
                type="tel"
                maxLength={11}
                allowClear
                disabled
                placeholder="请输入联系电话"
                style={COMMON_FIELD_STYLE}
              />
            </Form.Item>
          </div>

          {/* 2. 企业分类与规模组 */}
          <div style={{ marginBottom: 24 }}>
            <Divider style={{ marginBottom: 20 }} />

            <div
              style={{
                fontSize: 16,
                fontWeight: 500,
                color: '#1f2937',
                marginBottom: 12,
              }}
            >
              企业分类与规模
            </div>


            <Form.Item
              label="细分行业"
              name="subIndustry"
              rules={[{ required: true, message: '请选择细分行业' }]}
              style={{ marginBottom: 20 }}
            >
              <Select
                placeholder="请选择细分行业"
                allowClear
                showSearch
                options={[
                  { value: 'precision', label: '精密部件制造' },
                  { value: 'history', label: '历史经典工艺美术' },
                  { value: 'stainlessSteel', label: '不锈钢特材' },
                ]}
                onChange={(val) => {
                  if (val == 'precision') {
                    form.setFieldValue('industry', 'general');
                  }
                  if (val == 'history') {
                    form.setFieldValue('industry', 'lightIndustry');
                  }
                  if (val == 'stainlessSteel') {
                    form.setFieldValue('industry', 'metal');
                  }
                }}
                style={COMMON_FIELD_STYLE}
              />
            </Form.Item>
            <Form.Item
              label="所属行业"
              name="industry"
              rules={[{ required: true, message: '请选择所属行业' }]}
              style={{ marginBottom: 20 }}
            >
              <Select
                placeholder="请选择所属行业"
                allowClear
                showSearch
                disabled
                options={[
                  { value: 'general', label: '通用设备制造业' },
                  { value: 'lightIndustry', label: '轻工纺织业' },
                  { value: 'metal', label: '金属制品业' },
                ]}

                style={COMMON_FIELD_STYLE}
              />
            </Form.Item>
            <Form.Item
              label="产品分类"
              name="productType"
              rules={[{ required: true, message: '请选择产品分类' }]}
              style={{ marginBottom: 20 }}
            >
              <Cascader
                placeholder="请选择产品分类"
                allowClear
                disabled
                showSearch
                options={product_options_new as any}
                style={COMMON_FIELD_STYLE}
              />
              {/* <Select
                placeholder="请选择产品分类"
                allowClear
                showSearch
                disabled
                options={product}
                fieldNames={{ label: 'title' }}
                style={COMMON_FIELD_STYLE}
              /> */}
            </Form.Item>

            <Form.Item
              label="企业性质"
              name="companyType"
              rules={[{ required: true, message: '请选择企业性质' }]}
              style={{ marginBottom: 20 }}
            >
              <Select
                placeholder="请选择企业性质"
                allowClear
                disabled
                showSearch
                options={[
                  { value: 'stateOwnedEnterprise', label: '国有' },
                  { value: 'privateEnterprise', label: '民营' },
                  { value: 'foreignFundedEnterprise', label: '外资' },
                  { value: 'mixedOwnershipEnterprise', label: '混合所有制' },
                  { value: 'other', label: '其他' },
                ]}
                style={COMMON_FIELD_STYLE}
              />
            </Form.Item>

            <Form.Item label="企业规模" style={{ marginBottom: 20 }}>

              <Space.Compact style={{ width: '100%' }}>
                <Form.Item
                  name="companyScale"
                  noStyle
                  rules={[{ required: true, message: '请选择企业规模' }]}

                >
                  <Select
                    placeholder="请选择企业规模"
                    allowClear
                    // disabled={modalProps.title == "企业审核"}
                    showSearch
                    options={[
                      { value: 'microEnterprise', label: '微型' },
                      { value: 'smallEnterprise', label: '小型' },
                      { value: 'mediumEnterprise', label: '中型' },
                    ]}
                    style={COMMON_FIELD_STYLE}
                  />
                </Form.Item>

                <Button
                  style={{ ...COMMON_FIELD_STYLE, width: 'auto' }}
                  type="primary"
                  onClick={() =>
                    window.open(
                      'https://baosong.miit.gov.cn/ScaleTest',
                    )
                  }
                >
                  去测试
                </Button>
              </Space.Compact>
            </Form.Item>
            {/* <Form.Item
              label="企业规模"
              name="companyScale"
              rules={[{ required: true, message: '请选择企业规模' }]}
              style={{ marginBottom: 20 }}
            >
              <Select
                placeholder="请选择企业规模"
                allowClear
                disabled
                showSearch
                options={[
                  { value: 'microEnterprise', label: '微型' },
                  { value: 'smallEnterprise', label: '小型' },
                  { value: 'mediumEnterprise', label: '中型' },
                ]}
                style={COMMON_FIELD_STYLE}
              />
            </Form.Item> */}

            <Form.Item
              label="规模范围"
              name="scaleRange"
              rules={[{ required: true, message: '请选择规模范围' }]}
              style={{ marginBottom: 20 }}
            >
              <Select
                placeholder="请选择规模范围"
                allowClear
                disabled
                showSearch
                options={[
                  { value: 'scaleTop', label: '规模以上企业' },
                  { value: 'scaleBottom', label: '规模以下企业' },
                  // { value: 'mediumEnterprise', label: '中型' },
                ]}
                style={COMMON_FIELD_STYLE}
              />
            </Form.Item>

            <Form.Item
              label="优质中小企业情况"
              name="companySituation"
              rules={[{ required: true, message: '请选择优质中小企业情况' }]}
              style={{ marginBottom: 20 }}
            >
              <Select
                placeholder="请选择优质中小企业情况"
                allowClear
                showSearch
                disabled
                options={[

                  { value: 'innovation', label: '创新性中小企业' },
                  { value: 'expertiseSmall', label: '专精特新中小企业' },
                  { value: 'expertiseHuge', label: '专精特新“小巨人”企业' },
                  { value: 'expertiseOne', label: '制造业单项冠军企业' },
                  { value: 'no', label: '无' },
                ]}
                style={COMMON_FIELD_STYLE}
              />
            </Form.Item>
            <Form.Item
  
              label="是否获评省级未来工厂/智能工厂/数字化车间"
              name="companyProps"
              rules={[{ required: true, message: '请选择是否获评省级未来工厂/智能工厂/数字化车间' }]}
              style={{ marginBottom: 20 }}
            >
              <Select
                              placeholder="请选择是否获评省级未来工厂/智能工厂/数字化车间"
                              allowClear
                              showSearch
                              options={[
              
                                { value: '省级未来工厂', label: '省级未来工厂' },
                                { value: '智能工厂', label: '智能工厂' },
                                { value: '数字化车间', label: '数字化车间' },
                                { value: 'no', label: '无' },
                              ]}
                              style={COMMON_FIELD_STYLE}
                            />

            </Form.Item>
          </div>

          {/* 3. 行业与经济数据组 */}
          <div style={{ marginBottom: 24 }}>
            <Divider style={{ marginBottom: 20 }} />

            <div
              style={{
                fontSize: 16,
                fontWeight: 500,
                color: '#1f2937',
                marginBottom: 12,
              }}
            >
              行业与经济数据
            </div>

            <Form.Item
              label={`${LAST_YEAR}年营业收入(万元)`}
              name="lastYearIncome"
              rules={[{ required: true, message: '请输入上一年营业收入' }]}
              style={{ marginBottom: 20 }}
            >
              <InputNumber disabled placeholder="请输入上一年营业收入" style={COMMON_FIELD_STYLE} />
            </Form.Item>

            <Form.Item
              label={`${LAST_YEAR}年利润(万元)`}
              name="lastYearProfit"
              rules={[{ required: true, message: '请输入上一年营业利润' }]}
              style={{ marginBottom: 20 }}
            >
              <InputNumber disabled placeholder="请输入上一年营业利润" style={COMMON_FIELD_STYLE} />
            </Form.Item>

            <Form.Item
              label={`${LAST_YEAR}年人均营业收入(万元)`}
              name="lastYearProfitPerson"
              rules={[{ required: true, message: '请输入上一年人均营业收入' }]}
              style={{ marginBottom: 20 }}
            >
              <InputNumber disabled placeholder="请输入上一年人均营业收入" style={COMMON_FIELD_STYLE} />
            </Form.Item>
          </div>

          {/* 4. 补充信息组 */}
          <div style={{ marginBottom: 24 }}>
            <Divider style={{ marginBottom: 20 }} />

            <div
              style={{
                fontSize: 16,
                fontWeight: 500,
                color: '#1f2937',
                marginBottom: 12,
              }}
            >
              补充信息
            </div>
            <Form.Item
              label="已有数字化转型投入(万元)"
              name="digitalPay"
              rules={[{ required: true, message: '已有数字化转型投入' }]}
              style={{ marginBottom: 20 }}
            >
              <InputNumber disabled placeholder="请输入已有数字化转型投入" style={COMMON_FIELD_STYLE} />
            </Form.Item>
            <Form.Item
              label="企业基本情况"
              name="companyBaseInfo"
              rules={[{ required: true, message: '请输入企业基本情况' }]}
              style={{ marginBottom: 20 }}
            >
              <TextArea
                placeholder="请输入企业基本情况"
                showCount
                disabled
                maxLength={500}
                style={{
                  minHeight: 120,
                  maxHeight: 300,
                  resize: 'vertical',
                  ...COMMON_FIELD_STYLE,
                }}
              />
            </Form.Item>

            {/* <Form.Item
              label="企业完成数字化转型时间"
              name="companyChangeTime"
              style={{ marginBottom: 20 }}
            >
              <DatePicker disabled placeholder="请选择企业完成数字化转型时间" style={COMMON_FIELD_STYLE} />
            </Form.Item> */}

            <Form.Item
              label="国民经济行业分类"
              name="chinaEconomy"
              rules={[{ required: true, message: '请选择国民经济行业分类(四位码)' }]}
              style={{ marginBottom: 20 }}
            >
              <Cascader
                placeholder="请选择国民经济行业分类(四位码)"
                allowClear
                disabled
                showSearch
                options={chinaEconomy}
                fieldNames={{ label: "title" }}
                style={COMMON_FIELD_STYLE}
              />
            </Form.Item>

            <Form.Item
                                    label="企业云应用现状"
                                    name="companyCloud"
                                    rules={[{ required: true, message: '请选择企业云应用' }]}
                                    style={{ marginBottom: 20 }}
                                  >
                                    <Select
                                      placeholder="请选择企业云应用"
                                      allowClear
                                      showSearch
                                      disabled
            
                                      options={[
            
                                        { value: '公有云', label: '公有云' },
                                        { value: '私有云', label: '私有云' },
                                        { value: '混合云', label: '混合云' },
                                        { value: '未上云', label: '未上云' },
                                      ]}
                                      style={COMMON_FIELD_STYLE}
                                    />
                                  </Form.Item>
          </div>

          {/* 提交按钮 */}
          <Form.Item label={null} style={{ marginTop: 20, textAlign: "center" }}>

            {/* <Button
              type="primary"
              htmlType="submit"

            >
              提交
            </Button> */}

          </Form.Item>
        </Form>
      </div>
    </div>
  );
};

export default StepOnePage;
